<template>
  <a-layout class="allLayout">
    <a-layout-content>
      <a-button class="menubtn" type="primary" @click="addParentMenu()">新增一级菜单</a-button>
      <a-button style="margin-left:15px" type="danger" @click="deleteMenu">删除菜单</a-button>

      <a-table
        :columns="this.$staticMenu.menuConfigColumns"
        :data-source="tableData"
        :row-selection="rowSelection"
      >
        <!-- 补充表格每行的操作 -->
<!--          <a
          slot="action"
          slot-scope="text"
          @click="handleAdd(props.record)"
          v-if="props.record.children"
        > -->
        <span slot="action" slot-scope="text, record, index">
          <a @click="handleAdd(record)" v-if="record.addkids==true">
          <span class="ant-tag ant-tag-blue">
            <a-icon type="cloud-sync" />新增下级菜单
          </span>
        </a>
          <a @click="handleupdate(record)" >
          <span class="ant-tag ant-tag-blue">
            <a-icon type="cloud-sync" />修改目录
          </span>
        </a>
        </span>
      </a-table>
    </a-layout-content>
    <modal
      :title="modalTitle"
      :visible="modalVisible"
      :value="curVal"
      :type="addType"

      @ok="handleOk"
      @cancel="handleCancel"
    ></modal>
    <editModal
      :title="editModalTitle"
      :visible="editModalVisible"
      :record="curVal"
      @ok="handleEditOk"
      @cancel="handleEditCancel"
    ></editModal>

  </a-layout>
</template>

<script>
import { GETDATAMANAGEMENU ,DELETEMENUTREE} from '@/../static/js/apis.js';
import modal from './components/addMenuModal';
import editModal from './components/editMenuModal';
import _ from 'lodash'; // 引入lodash：封装了诸多对字符串，数组，对象等常见数据类型的处理函数
export default {
  inject:['reload'],                                 //注入App里的reload方法
  components: { modal,editModal },
  data () {
    return {
      tableData: [],
      rowSelection:{
          onChange: (selectedRowKeys, selectedRows) => {
            this.tableSelectedKeys=selectedRowKeys
          },
          onSelect: (record, selected, selectedRows) => {
            console.log(record, selected, selectedRows)
          },
          onSelectAll: (selected, selectedRows, changeRows) => {
            console.log(selected, selectedRows, changeRows)
          },
          getCheckboxProps: record => ({
            props: {
              disabled: record.disabled === true// Column configuration not to be checked
            }
          }),
      },
      modalTitle: '',
      modalVisible: false,
      editModalVisible:false,
      editModalTitle:"",
      curVal: '',
      addType:'',
      tableSelectedKeys: [],
    }
  },
  methods: {
    /* modal确定事件 */
    handleOk (e) {
      this.modalVisible = false
    },
    /* modal取消事件 */
    handleCancel (e) {
      this.modalVisible = false
    },
    handleEditOk (e) {
      this.editModalVisible = false
    },
    /* modal取消事件 */
    handleEditCancel (e) {
      this.editModalVisible = false
    },
    // 新增一级菜单
    addParentMenu () {
      this.addType='一级菜单'
      this.modalVisible = true
    },
    // 新增下级菜单
    handleAdd (record) {
      this.addType='下级菜单'
      this.modalVisible = true
      this.curVal = record.value
    },
    // 修改目录描述
    handleupdate (record) {
      let self = this
      self.editModalTitle = record.title
      self.curVal = record
      console.log(record)
      self.editModalVisible = true;
      // const pickArr = ['menuName', 'discription']
      // const formShowInfo = _.pick(record, pickArr)


    },
    deleteMenu(){
        let self = this
        const selectedRowKeys = self.tableSelectedKeys
        var params = {
          keys: selectedRowKeys
        }
      this.$confirm({
        title: '确定要删除该菜单吗?',
        content: '',
        onOk () {
          if (selectedRowKeys.length > 0) {
            DELETEMENUTREE(params, function (res) {
              self.$message.success(res.message)
              self.reload()
            })
          } else {
            self.$message.warning("请在表格中勾选要删除的目录！")
          }
        }
      })
    }
  },
  mounted () {
    let self = this
    GETDATAMANAGEMENU({ id: 0 }, function (res) {
      self.tableData = res.obj
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.allLayout {
  margin: 30px;

}

.ant-layout-content {
  background-color: white;
  padding:20px;
}
.menubtn{
  margin-bottom: 20px
}
</style>
